<template>
    <div>
        <el-table
            :data="tableData"
            :header-cell-style="{
                background: 'rgb(255, 191, 191)',
                color: 'rgb(44,44,44)'
            }"
            stripe
            v-loading="tableLoading"
        >
            <el-table-column label="序号" width="60">
                <template slot-scope="scope">{{ (page.current - 1) * page.size + scope.$index + 1 }}</template>
            </el-table-column>
            <el-table-column label="创建者" prop="createUserName" align="center" width="70"></el-table-column>
            <el-table-column label="创建时间" prop="createTime" align="center" width="160"></el-table-column>
            <el-table-column label="朋友圈类型" align="center" width="120">
                <template slot-scope="scope">{{ ['企业发表', '个人发表'][scope.row.filterType] }}</template>
            </el-table-column>
            <el-table-column label="可见范围" align="center">
                <template slot-scope="scope">{{ scope.row.visibleRange.join('、') }}</template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="70">
                <template slot-scope="scope">{{ ['未发布', '已发布', '进行中', '已结束', '待审批', '已驳回'][scope.row.status] }}</template>
            </el-table-column>
            <el-table-column label="任务标题" prop="title" align="center" width="160"></el-table-column>
            <el-table-column
                label="操作"
                width="220"
                align="center"
                v-if="permissions.cp_wechat_moments_type_view || permissions.cp_wechat_moments_edit || permissions.cp_wechat_moments_publish || permissions.cp_wechat_moments_approve"
            >
                <template slot-scope="scope">
                    <el-button v-if="permissions.cp_wechat_moments_approve && [4].includes(scope.row.status)" type="text" @click="activitySwitch(scope.row)">审批</el-button>
                    <el-button type="text" @click="handleEdit(scope.row, 1)">查看</el-button>
                    <el-button v-if="permissions.cp_wechat_moments_type_view && [1, 2].includes(scope.row.status)" type="text" @click="handleView(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            class="madp-pagination"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page.currentPage"
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
        ></el-pagination>
        <el-dialog title="任务审批" :visible.sync="dialogShow" width="800px" :close-on-click-modal="false">
            <el-form label-width="130px" :model="form" ref="form" :rules="rules">
                <el-form-item label="任务标题">
                    {{ form.title }}
                </el-form-item>
                <el-form-item label="任务时间"> {{ form.beginTime }} - {{ form.endTime }} </el-form-item>
                <el-form-item label="审批意见" prop="opinion">
                    <el-input v-model="form.opinion" type="textarea" key="opinion" maxlength="500" :autosize="{ minRows: 3 }" show-word-limit></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="dialogHandleSubmit(0)">拒绝</el-button>
                <el-button type="primary" @click="dialogHandleSubmit(1)">同意</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getTaskApproveList, approveTask, getTaskDetail } from '@/api/customer/wechat-task';
export default {
    props: {
        searchForm: {
            type: Object,
            default: () => {
                return {
                    createUserName: '',
                    title: '',
                    time: []
                };
            }
        },
        tableType: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // 表格数据
            tableData: [],
            // 分页
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            // loading
            tableLoading: false,
            // 弹窗开关
            dialogShow: false,
            // 审核表单
            form: {},
            rules: {
                opinion: [
                    {
                        required: true,
                        trigger: 'blur',
                        message: '请输入审批意见'
                    }
                ]
            }
        };
    },
    computed: {
        ...mapGetters({
            permissions: 'permissions'
        })
    },
    created() {
        this.getList();
    },
    methods: {
        // 点击按钮
        activitySwitch(data) {
            getTaskDetail(data.id).then((res) => {
                if (res.data.code != 0) return;
                let { beginTime, endTime, id, title } = res.data.data;
                this.form = { beginTime, endTime, id, title, opinion: '' };
                this.dialogShow = true;
            });
        },
        // 分页
        handleSizeChange(val) {
            this.page.size = val;
            this.getList(1);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getList(1);
        },
        // 查询
        getList(data) {
            if (!data) this.page.current = 1;
            this.tableLoading = true;
            let { createUserName, title, time } = this.searchForm,
                obj = {
                    current: this.page.current,
                    size: this.page.size,
                    createUserName,
                    title,
                    state: this.tableType
                };
            if (time && time.length > 0) {
                obj.startTime = time[0];
                obj.endTime = time[1];
            }
            getTaskApproveList(obj)
                .then((res) => {
                    if (res.data.code != 0) return;
                    let arr = res.data.data.records;
                    if (arr.length == 0 && this.page.current > 1) {
                        this.page.current--;
                        return;
                    }
                    this.tableData = arr;
                    this.page.total = res.data.data.total;
                    this.tableLoading = false;
                })
                .catch(() => {
                    this.tableLoading = false;
                });
        },
        // 点击查看
        handleEdit(data, val) {
            // val 1 查看  0 编辑
            let obj = { ...data, val };
            this.$emit('handleEdit', obj);
        },
        // 点击详情
        handleView(info) {
            this.$emit('handleView', info);
        },
        // 审批
        dialogHandleSubmit(val) {
            this.$confirm('是否确认' + ['拒绝', '同意'][val] + '通过审批', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$refs.form.validate((valid) => {
                        if (valid) {
                            let { id, opinion } = this.form;
                            approveTask({ id, opinion, state: val + 1 }).then((res) => {
                                if (res.data.code != 0) return;
                                this.$message({
                                    type: 'success',
                                    message: '审批成功!'
                                });
                                this.dialogShow = false;
                                this.$emit('handleUpdate');
                            });
                        }
                    });
                })
                .catch(() => {});
        }
    }
};
</script>
